define(["jquery"], ($) => {
    class Main{
        constructor (){
            this.banner()
        }
        banner (){
            const $ul=$(".banner ul");
            const $imgs=$(".banner ul li")
            const leng=$imgs.length
            const width=$imgs.width()
            var lastindex=0,index=0 ,timer=null
            $imgs.eq(0).clone().appendTo($ul)
            $ul.width((leng+1) * width)
            for(var i=0;i<leng;i++){
              $("<li>").addClass(i===0 ? "ac" :"").appendTo(".banner ol")
            }
           
            const $btns=$(".banner ol").children() 
            $btns.on("click",function () {
              lastindex=index;
              index=$(this).index()
              $ul.animate({left:-index*width})
              changeBtn();
            })
            $(".goNext").on("click",function () {
              lastindex=index
              index++
              if(index===leng){
                index=0;
                $ul.animate({left:-leng*width},()=>{
                  $ul.css("left",0)
                })
              }else{
                $ul.animate({left:-index*width})
              }
              changeBtn();
            })
            $(".goPrev").on("click",function () {
              lastindex=index
              index--
              if(index<0){
                index=leng-1;
                $ul.css("left",-leng*width)
              }
                $ul.animate({left:-index*width})
              
              changeBtn();
            })
            auto();
            function auto(){
              timer=setInterval( () => {
                $('.goNext').trigger('click')
              },3000)
            }
            $(".banner").hover(()=>{
              clearInterval(timer)
            },auto)
            function changeBtn(){
              $btns.eq(index).addClass("ac")
              $btns.eq(lastindex).removeClass("ac")
            }
        }
    }
    new Main()
})